{layout name="common/base" }
<style type="text/css">
    .layui-table-cell{
        height:auto;
        line-height: 28px;
    }
</style>
<table class="layui-hide" id="currentTableId" lay-filter="tooFilter"></table>

<script type="text/html" id="toolbarHead">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"> 新增分类 </button>
    </div>
</script>
<script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
    <!--<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>-->
</script>

<script type="text/html" id="image">
    {{# if(d.image != ''){ }}
    <img width="45px" height="45px" onclick="showimg(this)" src="<?php echo config('setting.domain_prefix').config('setting.image_prefix');?>{{d.image}}">
    {{# } }}
</script>

<script type="text/html" id="switchStatus">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="switchStatus" {{ d.status == 1 ? 'checked' : '' }}>
</script>
<script>
    layui.config({
        base: '__PUBLIC__/js/tableTreeDj/'
    });

    layui.use(['form','table','tableTreeDj'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            tableTree = layui.tableTreeDj;
        const objTable = {
            elem: '#currentTableId'
            ,url: '/admin/store.category/lstajax'
            ,toolbar: '#toolbarHead'
            ,cols: [[
                { field: 'id', title: 'ID', width: 100, align: "center" },
                { field: 'name', title: '分类名称' },
                { field: 'image', title: '图标', templet: '#image'},
                { field: 'sort', title: '排序'},
                {field: 'status', width: 100, title: '状态', templet: '#switchStatus', unresize: true},
                /*{
                    field: 'status', title: '状态', templet: function (d) {
                        switch (d.status) {
                            case 0:
                                return '<span class="layui-badge layui-bg-green">启用</span>';
                            default:
                                return '<span class="layui-badge">禁用</span>';
                        }
                    }, width: 130, align: "center"
                },*/
                { title: '操作', align: 'center', toolbar: '#currentTableBar' }
            ]]
            /*,page: {
                elem: 'page'
                , layout: ['prev', 'page', 'next', 'last','skip'] //自定义分页布局
                , groups: 5 //只显示 5 个连续页码
                , prev: '上一页'
                , next: '下一页'
                , first: 0 //不显示首页
            }*/
            ,limit: 10
            ,id: 'list'
            ,loading:true
        };

        const objTree = {
            //defaultShow: true,
            title: 'name',
            keyId: "id",
            keyPid: "pid",
            indent: '&nbsp;&nbsp;&nbsp;&nbsp;',
            icon: {
                open: 'layui-icon layui-icon-triangle-d', // 展开时候图标
                close: 'layui-icon layui-icon-triangle-r' // 折叠时候图标
            }
            ,showCache: true //是否开启展开折叠缓存,默认不开启
        }

        // tableTree 渲染表格
        //table.render(objTable)
        tableTree.render(objTable, objTree);

        //监听性别操作
        form.on('switch(switchStatus)', function(obj){
            var id = this.value;
            var status = obj.elem.checked ? 1 : 0;
            $.ajax({
                url: '{:url("admin/store.category/switchStatus")}?id=' + id + '&status=' + status,
                success: function(res){
                    layer.msg(res.msg);
                    /*if(res.status == 1) {
                        window.location.reload();
                    } else {
                        layer.msg(res.msg);
                    }*/
                }
            });
            return false;
        });

        //头工具栏事件
        table.on('toolbar(tooFilter)', function(obj){
            //var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    var index = layer.open({
                        title: '添加类目',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '/admin/store.category/add'
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
        });

        table.on('tool(tooFilter)', function(obj){
            var data = obj.data;
            console.log(data);
            switch(obj.event){
                case 'edit':
                    var index = layer.open({
                        title: '编辑类目',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '/admin/store.category/edit/id/' + data.id
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    break;
                case 'delete':
                    layer.confirm('真的删除么?',{icon:3, title:'提示'}, function (index) {
                        $.ajax({
                            url: '/admin/store.category/del/id/' + data.id,
                            type: 'GET',
                            success: function(res) {
                                //window.location.reload();
                                if(res.code == 1){
                                    layer.msg(res.msg, {
                                        icon: 1,
                                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                    }, function(){
                                        obj.del();
                                        layer.close(index);
                                    });
                                }else{
                                    layer.msg(res.msg, {
                                        icon: 1,
                                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                    });
                                }
                            },
                            error: function(res) {
                                //return   err(res)
                            }
                        });
                    });
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
        });
    });



    /*查看图片*/
    function showimg(url) {
        var img_infor = "<img src='" + url.src + "'  width='180' height='180' />";
        layer.open({
            type: 1,
            closeBtn: 1,
            shade: false,
            title: false, //不显示标题
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: false,
            area:['180px','180px'],
            content: img_infor //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响

        });
    }
</script>
